<template>
    <view class="container">
        <view class="wallet">
            <text class="coins">{{ inventory.coins || 0 }}</text>
        </view>
        
        <view class="shop-tabs">
            <view 
                v-for="(tab, index) in tabs" 
                :key="index"
                class="tab"
                :class="{ active: currentTab === index }"
                @click="switchTab(index)"
            >
                {{ tab }}
            </view>
        </view>
        
        <view class="shop-content">
            <swiper 
                class="swiper" 
                :current="currentTab" 
                @change="onSwiperChange"
            >
                <swiper-item class="swiper-item">
                    <scroll-view 
                        scroll-y 
                        class="shop-list"
                    >
                        <view 
                            v-for="(item, index) in foodItems" 
                            :key="index"
                            class="shop-item"
                        >
                            <image :src="item.image" mode="aspectFit"></image>
                            <view class="item-info">
                                <text class="item-name">{{ item.name }}</text>
                                <text class="item-desc">{{ item.description }}</text>
                                <view class="item-effects">
                                    <text class="effect positive" v-if="item.effect.hunger">
                                        饥饿 +{{ item.effect.hunger }}
                                    </text>
                                    <text class="effect positive" v-if="item.effect.happiness">
                                        心情 +{{ item.effect.happiness }}
                                    </text>
                                </view>
                                <view class="item-price">
                                    <text class="price">{{ item.price }}</text>
                                    <button 
                                        size="mini" 
                                        @click="buyItem('food', item)"
                                        :disabled="(inventory.coins || 0) < item.price"
                                    >
                                        购买
                                    </button>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </swiper-item>
                
                <swiper-item class="swiper-item">
                    <scroll-view 
                        scroll-y 
                        class="shop-list"
                    >
                        <view 
                            v-for="(item, index) in toyItems" 
                            :key="index"
                            class="shop-item"
                        >
                            <image :src="item.image" mode="aspectFit"></image>
                            <view class="item-info">
                                <text class="item-name">{{ item.name }}</text>
                                <text class="item-desc">{{ item.description }}</text>
                                <view class="item-effects">
                                    <text class="effect positive" v-if="item.effect.happiness">
                                        心情 +{{ item.effect.happiness }}
                                    </text>
                                    <text class="effect negative" v-if="item.effect.energy">
                                        体力 {{ item.effect.energy }}
                                    </text>
                                </view>
                                <view class="item-price">
                                    <text class="price">{{ item.price }}</text>
                                    <button 
                                        size="mini" 
                                        @click="buyItem('toys', item)"
                                        :disabled="(inventory.coins || 0) < item.price || (pet.energy + item.effect.energy) < 0"
                                    >
                                        购买
                                    </button>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
    data() {
        return {
            tabs: ['食物', '玩具'],
            currentTab: 0,
            windowHeight: 0
        }
    },
    
    onLoad() {
        const systemInfo = uni.getSystemInfoSync()
        const windowHeight = systemInfo.windowHeight
        document.documentElement.style.setProperty('--window-height', `${windowHeight - 200}px`)
    },
    
    computed: {
        ...mapState(['inventory', 'pet', 'shopItems']),
        foodItems() {
            return this.shopItems.food || []
        },
        toyItems() {
            return this.shopItems.toys || []
        }
    },
    
    methods: {
        ...mapMutations(['updateCoins', 'updatePetStatus', 'addToInventory']),
        
        switchTab(index) {
            this.currentTab = index
        },
        
        onSwiperChange(e) {
            this.currentTab = e.detail.current
        },
        
        buyItem(type, item) {
            if (this.inventory.coins >= item.price) {
                // 扣除金币
                this.updateCoins(this.inventory.coins - item.price)
                
                // 添加到背包
                this.addToInventory({
                    type,
                    item: { ...item }
                })
                
                // 显示购买成功提示
                uni.showToast({
                    title: '购买成功！',
                    icon: 'success'
                })
            } else {
                uni.showToast({
                    title: '金币不足',
                    icon: 'none'
                })
            }
        }
    }
}
</script>

<style lang="scss">
page {
    height: 100%;
}

.container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    padding: 20rpx;
    box-sizing: border-box;
    
    .wallet {
        background: rgba(255, 255, 255, 0.9);
        padding: 20rpx 30rpx;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        
        .coins {
            font-size: 32rpx;
            font-weight: bold;
            color: #ff9966;
            display: flex;
            align-items: center;
            
            &::before {
                content: '🪙';
                margin-right: 10rpx;
                font-size: 36rpx;
            }
        }
    }
    
    .shop-tabs {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 16rpx;
        padding: 10rpx;
        margin-bottom: 20rpx;
        display: flex;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 20rpx;
            font-size: 28rpx;
            color: #666;
            position: relative;
            transition: all 0.3s;
            
            &.active {
                color: #ff9966;
                font-weight: bold;
                
                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 40rpx;
                    height: 4rpx;
                    background-color: #ff9966;
                    border-radius: 2rpx;
                }
            }
            
            &:active {
                opacity: 0.7;
            }
        }
    }
    
    .shop-content {
        flex: 1;
        height: var(--window-height);
        
        .swiper {
            min-height: 80vh;
        }
        
        .shop-list {
            height: 100%;
            padding: 10rpx;
            box-sizing: border-box;
            
            .shop-item {
                background: rgba(255, 255, 255, 0.9);
                border-radius: 16rpx;
                padding: 20rpx;
                margin-bottom: 20rpx;
                display: flex;
                align-items: center;
                box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
                transition: all 0.3s;
                
                &:active {
                    transform: scale(0.98);
                }
                
                image {
                    width: 120rpx;
                    height: 120rpx;
                    margin-right: 20rpx;
                    border-radius: 12rpx;
                    background: rgba(255, 255, 255, 0.5);
                    padding: 10rpx;
                }
                
                .item-info {
                    flex: 1;
                    
                    .item-name {
                        font-size: 28rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 8rpx;
                    }
                    
                    .item-desc {
                        font-size: 24rpx;
                        color: #666;
                        margin-bottom: 16rpx;
                        line-height: 1.4;
                    }
                    
                    .item-effects {
                        display: flex;
                        gap: 16rpx;
                        margin-bottom: 16rpx;
                        flex-wrap: wrap;
                        
                        .effect {
                            font-size: 22rpx;
                            padding: 4rpx 12rpx;
                            border-radius: 20rpx;
                            background: rgba(255, 153, 102, 0.1);
                            color: #ff9966;
                            
                            &.positive {
                                background: rgba(82, 196, 26, 0.1);
                                color: #52c41a;
                            }
                            
                            &.negative {
                                background: rgba(255, 77, 79, 0.1);
                                color: #ff4d4f;
                            }
                        }
                    }
                    
                    .item-price {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        
                        .price {
                            font-size: 28rpx;
                            color: #ff9966;
                            font-weight: bold;
                            display: flex;
                            align-items: center;
                            
                            &::before {
                                content: '🪙';
                                margin-right: 6rpx;
                                font-size: 32rpx;
                            }
                        }
                        
                        button {
                            margin: 0;
                            background: #ff9966;
                            color: white;
                            border-radius: 30rpx;
                            font-size: 26rpx;
                            padding: 6rpx 24rpx;
                            border: none;
                            transition: all 0.3s;
                            
                            &:active {
                                transform: scale(0.95);
                            }
                            
                            &[disabled] {
                                background: #ccc;
                                opacity: 0.8;
                            }
                            
                            &::after {
                                border: none;
                            }
                        }
                    }
                }
            }
        }
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10rpx);
    }
}
</style>
